<template>
      <label class="checkbox" :class="{'is_clickColor' : ischeck}">
        <span class="checkbox_input">
            <span class="checkbox_inner"></span>
            <input class="checkbox_main" type="checkbox"
           :name='name'  v-model="model"
           :value='laber'>
        </span>
        <span class="checkbox_label">
            <slot>
              <template v-if="!$slots.default">{{laber}}</template> 
            </slot>
        </span>
    </label>
</template>
<script>
export default {
    // 计算属性
    computed: {
        // 判断checkbox是否被CheckboxGroup包裹，
        // ！！CheckboxGroup是否是布尔值
        isGroup (){
            return !!this.CheckboxGroup
        },
        model:{
            get(){
                // checkbox是否被包裹，是就用父组件CheckboxGroup里的value，没有就用自己的value
                return this.isGroup ? this.CheckboxGroup.value : this.value
            },
            set(value){
                  // checkbox是否被包裹，是就触发父组件点击事件，不是就用自己的点击事件
                this.isGroup ?  this.CheckboxGroup.$emit('input',value) : this.$emit('input' , value)
            }
        },
        ischeck (){
                // checkbox是否被包裹，laber是否在model里面，没有就用model
            return this.isGroup ? this.model.includes(this.laber) : this.model
        }
    },
    props:{
        value:{
            type:Boolean,
            default:false
        },
        name:{
            type:String,
            default:''
        },
        laber:{
            type:String,
            default:''
        }
    },
    // inject接收祖宗传过来的值
    inject: {
        CheckboxGroup: {
            default: ''
        }
    }
}
</script>
<style lang="scss">
     .checkbox_input{
        width: 14px;
        height: 14px;
        border: 1px solid #DCDFE6;
        background-color: white;
        display:inline-block;
        margin-right: 10px;
        position:relative;
    }
     .checkbox_inner{
        width: 4px;
        height: 4px;
        background-color: white;
        display:inline-block;
        border-radius: 100%;
        position:absolute;
        top:4px;
        left: 4px;
    }
      .checkbox_label{
        color: #606266;
        margin-right: 30px;
      }
     .checkbox_main{
        display: none;
    }
     .is_clickColor{
         .checkbox_input{
             background-color: #409EFF;
         }
        .checkbox_inner{
            background-color: white;
        }
        .checkbox_label{
            color: #409EFF;
        }
    }
</style>